<template>
  <div class="wrapper">
    <div class="top-bar">
      <router-link :to="{ path: '/weibo/edit' }" class="top-bar-btn-compose"></router-link>
      <a href="javascript:;" class="top-bar-btn-refresh" @click="findWeiboList()"></a>
    </div>
    <div class="cont">
      <div class="loading" v-show="loading">
        <span><i></i>加载中...</span>
      </div>
      <div class="wb-list">
        <!--列表为空时的提示文字模块 start-->
        <div class="wb-item wb-item-tips" v-show="!hasPublish">
          <p>您还未发布任何信息哦</p>
        </div>
        <!--列表为空时的提示文字模块 end-->
        <div class="wb-item" v-for="item in weiboList" v-show="weiboList.length > 0">
          <div class="wb-item-hd">
            <div class="wb-item-avatar">
              <img :src="item.avatar">
            </div>
            <div class="wb-item-user-info">
              <div class="wb-item-user-name">{{item.userName}}</div>
              <div class="wb-item-user-time">
                <span>{{item.createTime}}</span>
                <span>{{item.createFrom}}</span>
              </div>
            </div>
            <a class="wb-item-more" href="javascript:;" @click="showDelDialog(item)"></a>
          </div>
          <div class="wb-item-details">
            <p class="wb-default-txt"  v-html="item.details">
            </p>
          </div>
          <div class="wb-item-footer">
            <a class="wb-btn-like" href="javascript:;" @click="praise(item)">
              <i></i>
              <span>{{item.praise}}</span>
            </a>
          </div>
        </div>
      </div>
      <!--通过添加、删除 pop-menu-show 控制显示隐藏 pop-menu 模块-->
      <div class="pop-menu" :class="{'pop-menu-show':show}">
        <div class="pop-menu-list">
          <a href="javascript:;" class="pop-menu-item" @click="delWeibo()">删除</a>
          <a href="javascript:;" class="pop-menu-item pop-menu-item-cancel" @click="closeDelDialog()">取消</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data () {
      return { loading: true, show: false, delData: null }
    },
    created () {
      console.log('Component weibo list created')
    },
    destroyed () {
      console.log('Component weibo list destroyed')
    },
    activated () {
      console.log('Component weibo list activated ')
      this.findWeiboList()
    },
    mapActions: ['getWeiboList', 'deleteWeibo', 'praiseWeibo'],
    mapGetters: ['weiboList', 'hasPublish'],
    methods: {
      showDelDialog (weibo) {
        this.show = true
        this.delData = weibo
      },
      closeDelDialog () {
        this.show = false
        this.delData = null
      },
      findWeiboList () {
        const self = this
        this.getWeiboList({
          payload: {},
          then: [data => {
            self.loading = false
            console.log('load weibo success')
            return data
          }],
          err: [err => {
            self.loading = false
            return err
          }]
        })
      },
      delWeibo (weibo) {
        const self = this
        this.deleteWeibo({
          body: {
            id: this.delData.id
          },
          then: [data => {
            self.closeDelDialog()
            console.log('delete weibo success')
            self.findWeiboList()
            return data
          }],
          err: [err => {
            return err
          }]
        })
      },
      praise (weibo) {
        const self = this
        this.praiseWeibo({
          body: {
            id: weibo.id,
            body: {
              'praise': weibo.praise + 1
            }
          },
          then: [data => {
            console.log('praise weibo success')
            self.findWeiboList()
            return data
          }],
          err: [err => {
            return err
          }]
        })
      }
    },
    components: {}
  }
</script>
<style src="../styles/index"></style>
